import { getSpareFileByPage, addSpareFile, updateSpareFile, delSpareFile, exportSpareFile } from '@/services/device/spareFile';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
const SpareFile: React.FC<{}> = () => {
const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
    const ref = useRef(null);
  const columns: ProColumns[] = [
        {
        title: '序号',
        dataIndex: 'index',
        valueType: 'index',
        width: 80,
        },
        {
          title: 'MinIO中的bucketName',
          dataIndex: 'bucketName',
        },
        {
          title: '文件类别',
          dataIndex: 'category',
        },
        {
          title: '文件编码',
          dataIndex: 'fileCode',
        },
        {
          title: '文件后缀',
          dataIndex: 'fileExtEndDate',
        },
        {
          title: '文件名称',
          dataIndex: 'fileName',
        },
        {
          title: '文件大小',
          dataIndex: 'fileSize',
        },
        {
          title: '文件链接',
          dataIndex: 'fileUrl',
        },
        {
          title: '备注',
          dataIndex: 'memo',
        },
        {
          title: '存储在minIO中的文件名称',
          dataIndex: 'newFileName',
        },
        {
          title: '预留',
          dataIndex: 'reserved',
        },
        {
          title: '备件编码',
          dataIndex: 'spareId',
        },
        {
          title: '备件名称',
          dataIndex: 'spareName',
        },
        {
          title: '备品备件id',
          dataIndex: 'spareinfoId',
        },
        {
          title: '版本号',
          dataIndex: 'version',
        },
        {
        title: '创建日期', //表头显示的名称
        search: false,
        dataIndex: 'createTime',
        },
        {
        title: '创建人', //表头显示的名称
        search: false,
        dataIndex: 'createName',
        },
        {
        title: '操作',
        valueType: 'option',
        key: 'option',
        fixed: 'right',
        render: (text, record, _, action) => [
        <a
                key="editKey"
                onClick={() => {

        setModalVisit(true);
        setCreateOrUpdate(true);
        setFormTitle('编辑');
        form.setFieldsValue({
        bucketName: record.bucketName,
        category: record.category,
        fileCode: record.fileCode,
        fileExtEndDate: record.fileExtEndDate,
        fileName: record.fileName,
        fileSize: record.fileSize,
        fileUrl: record.fileUrl,
        memo: record.memo,
        newFileName: record.newFileName,
        reserved: record.reserved,
        spareId: record.spareId,
        spareName: record.spareName,
        spareinfoId: record.spareinfoId,
        version: record.version,
        id: record.id,
        });
        }}
        >
        编辑
        </a>,
        <a
                key="deleteKey"
                onClick={() => {


        Modal.confirm({
        title: '删除',
        content: '确定要删除吗',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
        await delSpareFile({ id: record.id });
        actionRef.current.reload();
        },
        });

        }}
        >
        删除
        </a>,
        ],
        },
  ];
  const handleSubmit = async (values) => {
        setConfirmLoading(true);
        if (formTitle == '新建') {
          const result = await addSpareFile(values);
        if (result != null) {
          message.success('添加成功');
        }
        } else {
          await updateSpareFile(values);
        }
        setConfirmLoading(false);
        setModalVisit(false);
        actionRef.current.reload();
  };

  return (
  <PageHeaderWrapper title={false} breadcrumb={undefined}>
    <ProTable
        headerTitle="xx查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                    setCreateOrUpdate(false);
                    setFormTitle('新建');
                    form.resetFields();
                    setModalVisit(true);
                }}
                type="primary"
                >
                新建
                </Button>,
                <Button
                        key="button"
                        icon={<PlusOutlined />}
                onClick={() => {
                const filters = filterTran(ref.current.getFieldsValue());
                exportSpareFile({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                }).then((res) => {
                const aLink = document.createElement('a');
                document.body.appendChild(aLink);
                aLink.style.display = 'none';
                aLink.href = window.URL.createObjectURL(res);
                aLink.setAttribute('download', `SpareFile.xlsx`);
                aLink.click();
                document.body.removeChild(aLink);
                });
                }}
                type="primary"
                >
                导出
                </Button>,
        ]}
        request={async (params = {}, sort, filter) => {

                const sorters = sortTran(sort);
                const filters = filterTran(params);
                const result = await getSpareFileByPage({ ...params, sorters: sorters, filters: filters });
                return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
                };

        }}
        columns={columns}
        scroll={{ x: 2000, y: 350 }}
        rowSelection={{}}
    />

    <ModalForm
        visible={modalVisit}
        title={formTitle}
        form={form}
        onFinish={handleSubmit}
        modalProps={{
        destroyOnClose: true,
        onCancel: () => {
            setModalVisit(false);
        },
        }}
    >
        <ProFormText  name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText  name="bucketName" label="MinIO中的bucketName"
                 rules={[{ required: true, message: 'Please input your bucketName!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="category" label="文件类别"
                 rules={[{ required: true, message: 'Please input your category!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="fileCode" label="文件编码"
                 rules={[{ required: true, message: 'Please input your fileCode!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="fileExtEndDate" label="文件后缀"
                 rules={[{ required: true, message: 'Please input your fileExtEndDate!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="fileName" label="文件名称"
                 rules={[{ required: true, message: 'Please input your fileName!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="fileSize" label="文件大小"
                 rules={[{ required: true, message: 'Please input your fileSize!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="fileUrl" label="文件链接"
                 rules={[{ required: true, message: 'Please input your fileUrl!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="memo" label="备注"
                 rules={[{ required: true, message: 'Please input your memo!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="newFileName" label="存储在minIO中的文件名称"
                 rules={[{ required: true, message: 'Please input your newFileName!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="reserved" label="预留"
                 rules={[{ required: true, message: 'Please input your reserved!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="spareId" label="备件编码"
                 rules={[{ required: true, message: 'Please input your spareId!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="spareName" label="备件名称"
                 rules={[{ required: true, message: 'Please input your spareName!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="spareinfoId" label="备品备件id"
                 rules={[{ required: true, message: 'Please input your spareinfoId!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="version" label="版本号"
                 rules={[{ required: true, message: 'Please input your version!' }]}
        disabled={createOrUpdate}  />
    </ModalForm>
  </PageHeaderWrapper>
  );
  };
  export default SpareFile;
